<template>
	<view class="page-box">
		<view class="bgimg-box">
			<image class="wh100" :src="`${staticUrl}big_bgimg.png`" mode="widthFix"></image>
			<uni-cusTitle title='打卡活动' :isIcon='true' img='/static/index/jiantou1.png'
				imgc='/static/index/daka-icon.png' color='#000' :iscIcon='true'></uni-cusTitle>

			<view class="list-box">
				<!-- 搜索 -->
				<view class="seach-box">
					<uni-search-bar :value="seachName" cancelButton='none' radius='36' placeholder="搜索活动名称" @confirm="search" />
				</view>
				
				<template v-if="list.length>0">
					<view class="item-box" v-for="(item,index) in list" :key="index" @click="toDaKa(item)">
						<image class="bg-box" src="/static/index/daka-bg.png"></image>
						<view class="left">
							<view class="big-box">
								<view class="s-box">
									<image class="wh100" :src="item.imgurl" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="title">{{item.title}}</view>
							<view class="fen-box">
								<image src="/static/index/fenshu.png"></image>
								<view class="s-fen-box">
									<image src="/static/sy1.png"></image>
									<text>{{item.fen}}</text>分
								</view>
							</view>
							<view class="addr-box" @click.stop="daohangTap(item)">
								<image src="/static/index/icon-map5.png"></image>
								<text class="line-two">{{item.addr}}</text>
							</view>
						</view>
					</view>

					<view class="no-box" v-if="isMore">无更多数据了...</view>
				</template>
				<template v-else>
					<uni-empty tips="'暂无数据...'" imgurl='/static/index/seach.png'></uni-empty>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seachName:'',
				staticUrl:this.$base.staticUrl,
				isMore:true,
				list: [{
					imgurl:'/static/top_back.png',
					title:'天生桥景区天生桥景区天生桥景区',
					fen:'4.5',
					addr:'南京市溧水区洪蓝镇天生桥路500号',
					latitude: 39.909,
					longitude: 116.39742
				}]
			}
		},

		onLoad() {

		},
		methods: {
			search(e){
				console.log(e);
			},
			
			toDaKa(item){
				uni.navigateTo({
					url:'./daka?id='+item.id
				})
			},
			
			daohangTap(item) {
				uni.openLocation({
					latitude: item.latitude * 1,
					longitude: item.longitude * 1,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-box {
		width: 100%;
		margin-top: 20rpx;
		position: absolute;
		left:50%;
		top: 150rpx;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx;
		box-sizing: border-box;
		
		// 搜索
		.seach-box{
			width: 100%;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #FFDD57;
			margin:30rpx 0 60rpx;
		}

		.item-box {
			width: 100%;
			height: 240rpx;
			margin-bottom: 52rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.bg-box {
				width:100%;
				height:100%;
				position: absolute;
				left: 0;
				top: 0
			}

			.left {
				width: 250rpx;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: center;

				.big-box {
					width: 190rpx;
					height: 190rpx;
					background: #884FFF;
					border-radius: 32rpx;
					transform: translateY(-16rpx);

					.s-box {
						width: 190rpx;
						height: 190rpx;
						border-radius: 32rpx;
						overflow: hidden;
						transform: translate(-6rpx,-6rpx);
					}
				}
			}

			.right {
				flex: 1;
				position: relative;
				padding-right:20rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
					line-height: 40rpx;
					width: calc(100% - 140rpx);
				}

				.fen-box {
					position: relative;
					margin-top: 15rpx;

					>image {
						width: 138rpx;
						height: 40rpx;
						position: absolute;
						left: 0;
					}

					.s-fen-box {
						width: 138rpx;
						height: 40rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #FFDD57;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right:10rpx;
						}

						text {
							font-size: 33rpx;
							font-family: AaHouDiHei;
							font-weight: bold;
							margin-top: -5rpx;
						}
					}
				}

				.addr-box {
					font-size: 28rpx;
					display: flex;
					margin-top: 15rpx;
					font-weight: bold;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	
	
</style>